<template>
    <div class="order-refund">

        <button @click="doRefundOrder()">Refund</button>

        <UxDialog :visible="!!dialog" @close="onClose()">

            <!-- 退款确认，银行卡和paypal -->
            <div class="refund-confirm" v-if="status == 'confirm' && payment != 'wallet'">
                <h2>Select your preferred refund method</h2>
                <ul>
                    <li @click="target = 'wallet'" :class="{ active: target == 'wallet' }" v-if="is_wallet == 2">
                        <img src="@/assets/images/payment-wallet-normal.png" alt="" style="height:20px">
                        <i><svg-icon name="checkbox-active" /></i>
                    </li>
                    <li @click="target = 'paypal'" :class="{ active: target == 'paypal' }" v-if="payment == 'paypal'">
                        <img src="@/assets/images/payment-paypal-normal.png" alt=""
                             style="height:28px;margin-bottom: 4px;">
                        <span>Original payment method</span>
                        <i><svg-icon name="checkbox-active" /></i>
                    </li>
                    <li @click="target = 'card'" :class="{ active: target == 'card' }" v-if="payment == 'card'">
                        <img src="@/assets/images/payment-card-normal.png" alt=""
                             style="height:20px;margin-bottom: 8px;">
                        <span>Original payment method</span>
                        <i><svg-icon name="checkbox-active" /></i>
                    </li>
                </ul>
                <p v-if="target == 'wallet'">You will receive the funds back to your POD wallet with no deduction of
                    transaction fees.</p>
                <p v-else-if="target == 'paypal'">When requesting a refund for reasons other than quality issues, please
                    note that you will bear a <a target="_blank"
                       href="https://www.paypal.com/us/cshelp/article/how-do-i-issue-a-refund-help101">PayPal
                        transaction fee</a> of 4.4% + 0.3 USD.</p>
                <p v-else-if="target == 'card'">When requesting a refund for reasons other than quality issues, please
                    note that you will bear a bank transaction fee of 3.4% + 1.3 USD.</p>
                <p v-else>Instant refunds with no extra fees when credited to your POD Wallet.</p>
                <button :disabled="!target" type="primary" @click="confirm()">Confirm</button>
            </div>

            <!-- 退款确认，钱包支付 -->
            <div class="refund-confirm-wallet" v-if="status == 'confirm' && payment == 'wallet'">
                <figure><img src="@/assets/images/payment-wallet-normal.png" alt=""></figure>
                <p>Are you sure you want to request <br> a refund?</p>
                <button type="primary" @click="confirm()">Confirm</button>
            </div>

            <!-- 退款中 -->
            <div class="refund-loading" v-if="status == 'loading'">
                <figure><img src="@/assets/images/refund/refund-loading.png"></figure>
                <h4><img src="@/assets/images/pay-loading.gif" alt="" /></h4>
                <p>Refund request is being processed, please do not repeat the application.</p>
            </div>

            <!-- 退款成功 -->
            <div class="refund-success" v-if="status == 'success'">
                <figure>
                    <img v-if="target == 'wallet'" src="@/assets/images/refund/refund-wallet-success.png" alt="">
                    <img v-if="target == 'paypal'" src="@/assets/images/refund/refund-paypal-success.png" alt="">
                    <img v-if="target == 'card'" src="@/assets/images/refund/refund-card-success.png" alt="">
                </figure>
                <p v-if="target == 'wallet'">We have received your refund request. The funds will be returned to your
                    POD wallet.</p>
                <p v-if="target == 'paypal'">Your refund request has been sent to PayPal for review. Once PayPal
                    approves the request, the refund will be credited to the same PayPal account used for the original
                    payment.</p>
                <p v-if="target == 'card'">Your refund request has been sent to the bank for review. Once the bank
                    approves the request, the refund will be processed and returned to your original payment method.</p>
                <button type="primary" @click="confirm()">Confirm</button>
            </div>

            <!-- 退款失败 -->
            <div class="refund-failure" v-if="status == 'failure'">
                <figure><img src="@/assets/images/refund/refund-failure.png" alt=""></figure>
                <p>Network error, please try again later.</p>
                <button type="primary" @click="confirm()">Confirm</button>
            </div>

        </UxDialog>
    </div>

</template>
<script>
import { mapGetters, mapState } from "vuex";

export default {
    props: ["info"],
    data () {
        return {
            status: 'confirm',
            target: '',
            dialog: null,
            refund_confirm: false,
            refund_loading: false,
        };
    },
    computed: {
        ...mapState('user', {
            is_wallet: 'is_wallet',
        }),
        // 支付方式
        payment () {
            const pricing = (this.info || {}).pricing || {};
            const payment = {
                "1": 'paypal',
                "2": 'card',
                "3": 'card',
                "4": 'wallet',
            }
            return payment[pricing.payment]
        },
    },
    methods: {

        // 退款操作
        doRefundOrder () {

            if (this.payment == 'wallet') {
                // 钱包只能退回钱包
                this.status = 'confirm';
                this.target = 'wallet';
                this.dialog = true;
            } else {
                this.status = 'confirm';
                this.target = '';
                this.dialog = true;
            }
        },

        onClose () {
            if (this.dialog) {
                this.dialog = false;
                if (this.status == 'failure' || this.status == 'success') {
                    this.$emit("update");
                }
            }
        },
        // 确认
        confirm () {
            if (this.status == 'confirm') {
                // 确认
                const code = this.info.order_code;
                const version = this.info.updated_at
                const target = this.target; // 防止关闭太快，接口返回时再次打开弹窗时提示错误
                const request = {
                    path: this.payment == 'wallet' ? 0 : this.target == 'wallet' ? 2 : 1,  // 0(默认，兼容旧页面): 原路退回，1：原路退回，2：退到钱包
                    updated_at: version,
                }

                this.status = 'loading'
                this.$http("Order.putRefundOrder/" + code, request).then(res => {
                    if (!this.dialog) {
                        // 对话框已经关了
                        this.$emit("update");
                    } else if (res.code == 0) {
                        this.target = target
                        this.status = 'success';
                    } else {
                        this.target = target
                        this.status = 'failure';
                    }
                })
            } else if (this.status == 'success' || this.status == 'failure') {
                this.dialog = false;
                this.$emit("update");
            }
        }
    },
    created () { },
};
</script>
<style lang="scss" scoped>
.order-refund {
    button {
        padding-left: 10px;
        padding-right: 10px;
        height: 32px;
        white-space: nowrap;
        background-color: #fff;
    }
}

.refund-confirm {
    display: flex;
    padding: 32px 14px 14px;
    flex-direction: column;

    h2 {
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 16px;
        text-align: center;
    }

    ul {
        display: flex;
        justify-content: center;
        padding: 24px 0;

        li {
            flex: 1;
            height: 128px;
            margin: 0 5px;
            background: #f6f6f6;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            cursor: pointer;

            span {
                font-size: 12px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #919191;
                line-height: 14px;
            }

            i {
                position: absolute;
                width: 16px;
                height: 16px;
                right: 4px;
                top: 4px;
                background: rgba(13, 13, 13, 0.12);
                border-radius: 8px;
                color: #fff;
                padding: 3px;
                box-sizing: border-box;
            }

            svg {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                display: block;
                width: 8px;
                height: 8px;
            }

            &.active {
                background: #ebebeb;

                i {
                    background-color: #000;
                }
            }

            &:hover {
                background: #ebebeb;
            }
        }
    }

    p {
        white-space: normal;
        max-width: 370px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 22px;
        height: 66px;

        a {
            color: #3199bd;
            text-decoration: underline;
            cursor: pointer;

            &:hover {
                color: #287e9c;
                text-decoration: none;
            }
        }
    }

    button {
        margin: 40px auto 0;
        width: 174px;
        height: 38px;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
    }
}

.refund-confirm-wallet {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    figure {
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f6f6f6;
        border-radius: 10px 10px 0 0;

        img {
            width: 156px;
            height: 20px;
        }
    }

    p {
        flex: 1;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 20px;
        text-align: center;
    }

    button {
        margin: 60px 14px 14px;
        height: 38px;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
    }
}

.refund-loading {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;

    figure {
        margin-top: 116px;
        width: 66px;
        height: 66px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    h4 {
        margin-top: 26px;
        height: 8px;

        img {
            width: 40px;
            height: 8px;
        }
    }

    p {
        margin: 42px 20px 0;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 20px;
        text-align: center;
    }
}

.refund-success {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    figure {
        margin: 60px auto 0;
        width: 80px;
        height: 80px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    p {
        margin: 30px 14px 0;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 20px;
        text-align: center;
    }

    button {
        margin: 0 14px 14px;
        height: 38px;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
    }
}

.refund-failure {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    figure {
        margin: 80px auto 0;
        width: 80px;
        height: 80px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    p {
        margin: 10px 14px 0;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 20px;
        text-align: center;
    }

    button {
        margin: 80px 14px 14px;
        height: 38px;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
    }
}
</style>
